import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { nanoid } from 'nanoid'

import './index.css'

export default class Header extends Component {
  // 注意：
  // propTypes 仅用于父组件向子组件传参，且子组件对接收的类型进行限制的情况下（类似于 Vue 的传参限制）
  static propTypes = {
    headerPushData: PropTypes.func.isRequired
  }

  handleKeyUp = (event) => {
    const {
      keyCode,
      target: { value }
    } = event

    // 判断是否是回车按键
    if (keyCode !== 13 || !value.trim()) return
    console.log('input-->value', value)

    // 子组件给父组件通信
    // 方法，调用父传给子的函数
    this.props.headerPushData({ id: nanoid(), name: value, isDone: false })

    // 清空搜索框
    event.target.value = ''
  }
  render() {
    return (
      <input
        className="header-input"
        type="text"
        placeholder="输入并按回车后会自动添加到列表头部"
        onKeyUp={this.handleKeyUp}
      />
    )
  }
}
